<template>
    <div class="model-carousel">
        <Modal v-model="modalRejectShow" title="基础详情" width="70%">
            <!-- <Col span="11"> -->
            <Form ref="formValidates" :model="formValidate" :rules="ruleValidate" :label-width="100">
                <Row>
                    <Col span="12">
                    <FormItem label="需求类型" prop="type">
                        <Select v-model="clickType" @on-change="clickTypeFun" multiple placeholder="请选择需求类型">
                            <Option v-for="(item, i) in type" :value="item.value" :key="i">{{ item.label }}</Option>
                        </Select>
                    </FormItem>
                    </Col>
                    <Col span="12">
                    <FormItem label="需求标题" prop="title">
                        <Input v-model="formValidate.title" placeholder="请输入需求标题"></Input>
                    </FormItem>
                    </Col>
                    <Col span="12">
                    <FormItem label="需求起止时间" prop="startTime">
                        <DatePicker type="datetimerange" v-model="date" @on-change="handleClickDate"
                            placeholder="开始时间-结束时间" style="width: 240px" />
                    </FormItem>
                    </Col>
                    <Col span="12">
                    <FormItem label="佣金金额" prop="price">
                        <Input v-model="formValidate.price" placeholder="请输入佣金金额"></Input>
                    </FormItem>
                    </Col>
                    <Col span="12">
                    <FormItem label="附件上传" prop="file">
                        <FileUpload @input="FileUploadInput" :value="formValidate.file"></FileUpload>
                    </FormItem>
                    </Col>
                    <Col span="12">
                    <FormItem label="需求描述" prop="content">
                        <Input v-model="formValidate.content" type="textarea" :autosize="{ minRows: 2, maxRows: 5 }"
                            placeholder="请输入需求描述"></Input>
                    </FormItem>
                    </Col>

                    <Col span="12">
                    <FormItem label="备注">
                        <Input v-model="formValidate.remark" type="textarea" :autosize="{ minRows: 2, maxRows: 5 }"
                            placeholder="请输入备注"></Input>
                    </FormItem>
                    </Col>
                    <Col span="12">
                    <FormItem label="其他需求">
                        <Input v-model="formValidate.other" type="textarea" :autosize="{ minRows: 2, maxRows: 5 }"
                            placeholder="请输入其他需求"></Input>
                    </FormItem>

                    </Col>
                </Row>
                <div style="height: 20px;"></div>
                <Checkbox v-model="single">协议勾选有客户提供二次点击后跳转内容</Checkbox>
                <div style="height: 20px;"></div>
            </Form>

            <div slot="footer">
                <Button @click="cancel">取消</Button>
                <Button style="background-color: #ff5343;color: #fff;"
                    @click="handleSubmit('formValidates')">重新提交</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
import storage from "@/plugins/storage";
import { getBannerList } from "@/api/writer/index";
import { buyerUrl } from '@/plugins/request.js';
export default {
    name: "modelCarousel",
    props: {
        modalRejectShow: {
            type: Boolean,
            default: false,
        },
        formValidate: {
            type: Object,
            default: {},
        },
        ruleValidate: {
            type: Object,
            default: {},
        },
        type: {
            type: Array,
            default: [],
        },
    },
    data() {
        return {
            clickType: [],
            date: [],
            roles: '',
            single: false,
        }
    },
    methods: {
        clickTypeFun(val) {
            console.log(val, "val");
            this.formValidate.type = val.join(',')
        },
        //日期选择
        handleClickDate(val) {
            console.log(val, "val");
            this.formValidate.startTime = val[0]
            this.formValidate.endTime = val[1]
        },
        cancel() {
            this.$emit('cancel')
        },
        //上传附件
        FileUploadInput(file) {
            console.log(file, "file");
        },
        handleSubmit(refName) {
            this.$refs[refName].validate((valid) => {
                if (valid) {
                    if (!this.single) {
                        this.$Message.error('请勾选协议!');
                        return
                    }
                    this.$emit('handleSubmit', this.formValidate)
                } else {
                    return false;
                }
            });
        }
    },
    mounted() {
        // if (storage.getItem("roles")) {
        //     let role = JSON.parse(storage.getItem("roles"))
        //     this.roles = role[0]
        // }
        let formValidate=this.formValidate
        if (formValidate) {
            console.log(1111111,'??????',formValidate);
            
            if (formValidate.type) {
                this.clickType = formValidate.type.split(',')
            }
            this.date = [formValidate.startTime, formValidate.endTime]
        }

    },
};
</script>
